<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="cssase.css">

    <title>申报系统</title>
    <style>
        html,body{
            width:100%;
            height:100%;
            background-color:#fafafa;
        }
        .top{
            width:100%;
            height:80px;
            line-height:80px;
            background-color:#fff;
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05); 
        }
        .top img{
            margin-left:80px;
            width:484px;
        }
        .top span{
            font-size:23px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            color: #04185f;
            vertical-align: bottom;
        }
        .stepWrap{
            width:1100px;
            background: #ffffff;
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05);
            margin:0 auto; 
        }
        .steps {
            position: relative;
            margin-top:40px;
            counter-reset: step;
            background: #fff;
            /* margin: 4rem 0rem 4.4rem; */
            overflow: hidden;
        }

        /* 步骤描述 */

        .steps li {
            list-style-type: none;
            text-align: center;
            width: 33.3%;
            position: relative;
            float: left;
            padding: 23px 0;
            font-size:18px;
            font-family: MicrosoftYaHeiUI;
            color: rgba(68, 68, 68, 1);
            line-height: 3.5rem;
        }
        /* 步骤数字 */
        .steps li:before {
            display: block;
            content: counter(step);
            /* 设定计数器内容 */
            counter-increment: step;
            /* 计数器值递增 */
            width: 40px;
            height: 40px;
            border-radius:40px;
            color: #fff;
            text-align: center;
            font-weight: 600;
            margin: 0 auto 0 auto;
            font-size: 16px;
            line-height:40px;
            font-family: MicrosoftYaHeiUI;
            color:#266fe9;
            background: rgba(255, 255, 255, 1);
            border: 2px solid #266fe9;
        }
        /* 步骤数字 */
        .steps .grey:before {
            color: #CBCBCB !important;
            border: 0.2rem solid #CBCBCB !important;
        }
        .done:before {
            background-image: url("img/dui.png") !important;
            background-size: cover !important;
            background-repeat: no-repeat;
            content: '' !important;
        }
        /* 连接线 */
        .steps li~li:after {
            content: '';
            width: 83%;
            height: 0.3rem;
            background-color: #CBCBCB;
            position: absolute;
            left: -41.5%;
            top: 27%;
            z-index: 0;
        }

        /* 将当前/完成步骤之前的数字及连接线变绿 */

        .grey {
            color: #CBCBCB !important;
        }

        .done {
            color: #0D3982 !important;
        }
        .active{
            color: #266fe9 !important;
        }
        .tjcg,.tips{
            text-align:center;
            font-size:20px;
        }
        .contWrap{
            width:1100px;
            height:500px;
            margin:30px auto;
            padding:100px 0;
            box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.05);
            background-color:#fff;
        }
        .contWrap form{
            width:500px;
            margin:0 auto;
        }
        .inputWrapper{
            position: relative;
            margin-bottom:30px;
        }
        .contWrap form input{
            outline:none;
            width:100%;
            height:36px;
            border: 1px solid #cacaca;
            border-radius:4px;
            text-indent:1em;
        }
        .contWrap form input:focus{
            outline:none;
            border: 1px solid #2394f2;
        }
        .btnWrap{
            text-align: center;
        }
        .sqname{
            color:red;
            margin-bottom:2px;
        }
        .btnWrap button{
            width:120px;
            height:36px;
            margin-top: 10px;
            line-height:36px;
            text-align:center;
            outline:none;
            cursor:pointer;
        }
        .btn1,.btn3{
            border: 1px solid #266FE9;
            color:#266FE9;
            background-color:#fff;
            margin-right:50px;
        }
        .btn2,.btn4{
            border:0;
            background-color:#266FE9;
            color:#fff;
        }
        .valid_message{
            position: absolute;
            display: block;
            top:60px;
            color:red;
            font-size:14px;
        }
        .getYzm{
            width:98px;
            height:38px;
            text-align:center;
            line-height:38px;
            color:#266FE9;
            font-size:14px;
            vertical-align:top;
            border: 1px solid #cacaca;
            cursor:pointer;
            outline:none;
        }
        #fullbg {
    background-color: gray;
    left: 0;
    opacity: 0.5;
    position: absolute;
    top: 0;
    z-index: 3;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    -khtml-opacity: 0.5;
}

#dialog {
    background-color: #fff;
    border: 1px solid #dcdcdc;
    width: 600px;
    margin: 0 auto;
    position: fixed !important;
    /* 浮动对话框 */
    position: absolute;
    top: 20%;
    z-index: 5;
    left: 50%;
    margin-left: -300px;
    border-radius: 0.5rem;
    display:none;
}

#dialog p {
    margin: 0 0 12px;
    height: 24px;
    line-height: 24px;
    background: #CCCCCC;
}

#dialog p.close {
    text-align: right;
    padding-right: 10px;
}

#dialog p.close a {
    color: #fff;
    text-decoration: none;
}

.checkdiv {
    height:300px;
    margin: 0rem auto;
    text-align: center;
    position: relative;
    display: none;
}

.checkdiv1 {
    display: inline-block;
    height:300px;
    width:100%;
}

.line {
    width: 100%;
    height: 2.6rem;
    display: none;
}

.checkimg {
    width:100%;
}

.refreshimg {
    width:40px;
}

.refreshdiv {
    display: inline-block;
    width:40px;
    height:40px;
    position: absolute;
    top:10px;
    right:10px;
}


.button {
    text-align: center;
    height:50px;
    line-height:50px;
    background: linear-gradient(225deg, rgba(157, 55, 241, 1) 0%, rgba(38, 111, 233, 1) 100%);
    border-radius: 0.6rem;
    /* margin: 6rem auto; */
    display: none;
}

.buttontext {
    font-size:18px;
    font-family: MicrosoftYaHeiUI;
    color: rgba(255, 255, 255, 1);
    line-height:50px;
}

.addimg1 {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height:40px;
    border-radius:40px;
    border: 2px solid rgba(38, 111, 233, 1);
    font-size: 18px;
    color: blue;
    background: white;
}
.addimg2 {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height:40px;
    border-radius:40px;
    border: 2px solid rgba(38, 111, 233, 1);
    font-size: 18px;
    color: blue;
    background: white;
}

.addimg3 {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height:40px;
    border-radius:40px;
    border: 2px solid rgba(38, 111, 233, 1);
    font-size: 18px;
    color: blue;
    background: white;
}
    </style>
</head>
<body>
    <div class='top'>
        <img onclick="goHome()" style="cursor:pointer" src="img/logotext.png">&nbsp;|&nbsp;<span>忘记密码</span>
    </div>
    <div class="step1">
        <div class="stepWrap">
            <ul class="steps">
                <li class="active">验证用户邮箱</li>
                <li class="grey">重置密码</li>
                <li class='grey'>提交审核</li>
            </ul>
        </div>
        <div class="contWrap">
            <form id="foretForm">
                <div class='inputWrapper'>
                    <div class='sqname'>*
                        <span style='color:#444444' id="email">邮箱</span>
                    </div>
                    <Input placeholder='' id="mail" class='qxmInput required' name="" data-valid="isNonEmpty||isEmail" data-error="请输入邮箱||请输入正确的邮箱"/>
                </div>
                <div class='inputWrapper'>
                    <div class='sqname'>*
                        <span style='color:#444444'>验证码</span>
                    </div>
                    <Input id="yzm" style="width:400px;border-top-right-radius:0;border-bottom-right-radius:0;" placeholder='' class='qxmInput required' name="" data-valid="isNonEmpty" data-error="请输入验证码"/><button id="code" type="button" onclick="getCode(this)" class="getYzm">获取验证码</button>
                </div>
                <div class="btnWrap">
                    <button type="button" class="btn1" onclick="login()">返回登录</button>
                    <button type="button" class="btn2" onclick="next()">下一步</button>
                </div>
            </form>

        </div>
    </div>
    <div class="step2" style="display:none;">
        <div class="stepWrap">
            <ul class="steps">
                <li class="done">验证用户手机</li>
                <li class="active">重置密码</li>
                <li class='grey'>提交审核</li>
            </ul>
        </div>
        <div class="contWrap">
            <form id="foretForm2">
                <div class='inputWrapper'>
                    <div class='sqname'>*
                        <span style='color:#444444'>密码</span>
                    </div>
                    <Input placeholder='' type="password" id="password" class='qxmInput required' name="" data-valid="isNonEmpty||isPaws" data-error="请输入密码||请输入6-18位密码包括字母大小写、数字和特殊符号"/>
                </div>
                <div class='inputWrapper'>
                    <div class='sqname'>*
                        <span style='color:#444444'>确认密码</span>
                    </div>
                    <Input placeholder='' type="password" id="password2" class='qxmInput required' name="" data-valid="isNonEmpty||equalTo:password" data-error="请重新输入密码||密码不一致"/>
                </div>
                <div class="btnWrap">
                    <button type="button" class="btn3" onclick="prev()">上一步</button>
                    <button type="button" class="btn4" onclick="submitdata()">确认修改</button>
                </div>
            </form>
            <div id="fullbg"></div>
            <div id="dialog">
                <div style='font-size:18px;color:#444444;padding:2rem;border-bottom:1px solid #dcdcdc;'>请完成安全验证</div>
                <!-- <div class="checkdiv"> -->
                <div class="checkdiv checkdiv1" onclick="getXY()">
                    <!-- <img src="./images/checkimg.png" class="checkimg" id="checkimg"> -->
                    <img src="" class="checkimg" id="checkimg">
                    <div class="refreshdiv" onclick="refresh()">
                        <img src="img/refresh.png" class="refreshimg">
                    </div>
                </div>
                <!-- </div> -->
                <div class="button" onclick="getcheckImg()">
                    <span class="buttontext" id="buttontext"></span>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/qklConfig.js"></script>
    <script src="js/jquery-validate.js"></script>
    <script src="js/jssha256.js"></script>
    <script src="js/forget.js"></script>
    <script src="plugins/axios/axios.min.js"></script>
    <script>
        $('form').validate({
            rules: {
                pw2: {
                    required: true,
                    equalTo: "#pw1"
                },
            },
            messages: {
                pw2: {
                    required: "请再次输入密码",
                    equalTo: "请再次输入相同的值"
                },
            },
            onFocus: function () {
                this.parent().addClass('active');
                return false;
            },
            onBlur: function () {
                var $parent = this.parent();
                var _status = parseInt(this.attr('data-status'));
                $parent.removeClass('active');
                if (!_status) {
                    $parent.addClass('error');
                }
                return false;
            }


        });

        function login(){
            window.location.href="login.html";
        }

        function next(){

            if(document.getElementById("email")!=null){

                axios({
                    method: 'get',
                    url: 'http://localhost:8080/user/forget?email=' + document.getElementById("mail").value,

                }).then(function (res) {

                    if(res.data.code === 1){
                        window.location.href="forgettwo.html"
                    }else{
                        alert("邮箱信息错误！")
                    }
                })
            }else{
                alert("邮箱为空!");
            }
        }

        function getCode(obj) {

            axios({
                method: 'get',
                url: 'http://localhost:8080/user/email',

            }).then(function (res) {

                if(res.data.code === 1){
                    alert(res.data.data)
                }else{
                    alert("失败")
                }
            })
        }

    </script>
</body>
</html>